<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DeepSeek-R1 前端调用</title>
    <style>
        body {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        .chat-container {
            height: 500px;
            border: 1px solid #ccc;
            overflow-y: auto;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 5px;
        }
        .input-container {
            display: flex;
            gap: 10px;
        }
        #userInput {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:disabled {
            background-color: #ccc;
        }
        .message {
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 5px;
        }
        .user-message {
            background-color: #e9ecef;
            margin-left: 20%;
        }
        .ai-message {
            background-color: #f8f9fa;
            margin-right: 20%;
        }
    </style>
</head>
<body>
    <h1>与 DeepSeek-R1 对话</h1>
    <div id="chatBox" class="chat-container"></div>
    <div class="input-container">
        <input type="text" id="userInput" placeholder="输入你的问题">
        <button id="sendButton" onclick="sendMessage()">发送</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script>
        const chatBox = document.getElementById("chatBox");
        const userInput = document.getElementById("userInput");
        const sendButton = document.getElementById("sendButton");
        let messageHistory = [];

        function addMessageToChat(role, content) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${role}-message`;
            messageDiv.innerHTML = role === 'ai' ? marked.parse(content) : content;
            chatBox.appendChild(messageDiv);
            chatBox.scrollTop = chatBox.scrollHeight;
        }

        async function sendMessage() {
            const input = userInput.value.trim();
            if (!input) return;

            sendButton.disabled = true;
            userInput.disabled = true;

            addMessageToChat('user', input);
            messageHistory.push({ role: "user", content: input });
            userInput.value = '';

            try {
                const response = await axios.post("http://localhost:11434/api/chat", {
                    model: "deepseek-r1:7b",
                    messages: messageHistory,
                    stream: false
                });

                const reply = response.data.message.content;
                messageHistory.push({ role: "assistant", content: reply });
                addMessageToChat('ai', reply);
            } catch (error) {
                console.error("调用失败:", error);
                addMessageToChat('ai', "错误: " + error.message);
            } finally {
                sendButton.disabled = false;
                userInput.disabled = false;
                userInput.focus();
            }
        }

        userInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });
    </script>
</body>
</html>